<template>
	<div class="permission-role">
		<!--上面的东西-->
		<bread-crumb divider refresh @actRefresh="actRefresh">
			<template slot="title">卡券管理</template>
		</bread-crumb>
		<div>
			<!--<el-button type="success" size="small" @click="visibleDialog=true">创建卡券</el-button>-->
		</div>
		<!--角色列表-->
		<el-table :data="dataList" size="" v-loading="loading"  border style="width:100%">
			<el-table-column prop="id" label="id" width="70"></el-table-column>
			<el-table-column prop="" label="商家名称" width="">
				<template slot-scope="scope">
					<div>{{scope.row.merchantName}}</div>
					<div>{{scope.row.stockName}}</div>
				</template>
			</el-table-column>
			<!--<el-table-column prop="stockName" label="券名称" width=""></el-table-column>-->
			<el-table-column prop="stockId" label="券id" width="150"></el-table-column>

			<el-table-column prop="discountAmount" label="面额" width=""></el-table-column>
			<el-table-column prop="transactionMinimum" label="门槛" width=""></el-table-column>
			<el-table-column prop="maxCoupons" label="发行数量" width=""></el-table-column>
			<el-table-column prop="fetchCoupons" label="已领取" width=""></el-table-column>
			<el-table-column prop="maxCouponsPerUser" label="每人可领" width=""></el-table-column>
			<!--<el-table-column prop="createTime" label="创建时间" width=""></el-table-column>-->
			<!--<el-table-column prop="availableBeginTime" label="开始时间" width=""></el-table-column>-->
			<!--<el-table-column prop="availableEndTime" label="结束时间" width=""></el-table-column>-->
			<el-table-column label="开始-截止" width="200">
				<template slot-scope="scope">
					<div>{{scope.row.availableBeginTime}}</div>
					<div>{{scope.row.availableEndTime}}</div>
				</template>
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">

				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="170">
				<template slot-scope="scope">
					<el-button type="danger" size="small" @click="">操作</el-button>
				</template>
			</el-table-column>
		</el-table>

	</div>
</template>

<script>
import breadCrumb from '@/views/components/breadCrumb';
import { mixinUtils } from '@/mixins/mixins.utils';
import {
	apiCouponListOfBusiness,
} from '@/axios/api.system';
import { mapState } from 'vuex';
export default {
	name: 'couponList',
	mixins: [mixinUtils],
	components: {breadCrumb},
	data:function(){
		return {
			visibleDialog:false,//角色创建层
			visibleDialogRole:false,//角色权限编辑 层
			//原始值
			pagerCount: 5,//饿了么垃圾分页的页块显示
			page      : 1,
			pageSize  : 10,
			totalCount: 0,//总记录数
			//复杂值
			dataList: [],
			submitData:{
				title:'',
			},

		}
	},
	computed:{
		...mapState(['loading']),
	},
	created() {
		this.getDataList()
	},
	methods:{
		//获取默认数据
		getDataList(){
			apiCouponListOfBusiness({
				pageSize    : this.pageSize,
				page     : this.page,
			}).then((res) => {
				this.totalCount = res.count
				if (res.data.length > 0) {
					this.dataList = res.data
				} else {
					this.dataList = []
				}
			})
		},




		/////////////////////////////////////////////其它////////////////////////////////////////////////
		/////////////////////////////////////////////其它////////////////////////////////////////////////
		/////////////////////////////////////////////其它////////////////////////////////////////////////
		//刷新
		actRefresh() {
			this.getDataList()
		},


		handleSizeChange (val) {
			console.log('改变每页数',val)
			this.page = 1 //恢复第一页
			this.pageSize = val
			this.getDataList()
		},
		handleCurrentChange (val) {
			console.log('改变当前页',val)
			this.page = val
			this.getDataList()
		},
	}

}
</script>

<style lang="less" scoped>
@import '~@/assets/global.less';
	.role-list{
		height:60vh!important;overflow-y: scroll;
		//border:1px solid #666;
		background-color: #f9f9f9;
		padding:10px;
		box-shadow: inset 2px 2px 2px #ddd;
		.checkbox-row{
			padding:10px 0px;
			border-bottom:1px solid #ddd;
			.title{font-weight: bold;.flex-jcsb()}
		}
	}
</style>
